<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="top">
				<view :style="{ marginLeft: index == 0 ? '0rpx' : '40rpx' }" @click="navClick(item)"
					:class="navIndex == item.value ? 'top_items_active' : 'top_items'" v-for="(item, index) in navList"
					:key="index">
					{{ item.label }}
				</view>
			</view>
			<view class="div">
				<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore">
					<view class="items" v-for="(item, index) in list" :key="index" @click="gotos(item)">
						<view class="left">
							<image class="image" :src="item.avatarImages" alt=""></image>
						</view>
						<view class="right">
							<view class="header">
								<view class="title">{{ item.title }}</view>
							</view>
							<view class="bottom">
								<view class="answer">{{ item.createTime }}</view>
								<view class="date">{{ item.hits }}</view>
							</view>
						</view>
					</view>
					<view class="zanwu" v-if="list.length == 0">暂无数据</view>
					<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { collectList } from '@/api/index.js'
import config from '@/config/config.js'
import {
	systemInfo
} from '../../utils/mixin'
export default {
	components: {},
	mixins: [systemInfo],
	data() {
		return {
			navList: [{
				label: '所有',
				value: ''
			},
			{
				label: '科普',
				value: '科普'
			},
			{
				label: '圈子',
				value: '圈子'
			},
				// {
				// 	label: '商品',
				// 	value: '4'
				// },
			],
			navIndex: '',
			list: [],


			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			status: 'loadmore',
			triggered: false,
			downRefresh: false,
			pageCount: 0,
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();
		this.triggered = true;
		this.downRefresh = true
		this.queryParams.pageNum = 1
		this.list = []
		this.getcollectList('')
	},
	methods: {
		async navClick(item) {
			this.navIndex = item.value
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList(item.value)
		},
		gotos(item) {
			if (item.businessType == '科普') {
				uni.navigateTo({
					url: "/subpackage1/classification/classificationDetails?id=" + item.businessId
				})
			}
		},
		async getcollectList(business) {
			const res = await collectList({ businessType: business, ...this.queryParams })
			this.pageCount = res.total
			res.rows.forEach(element => {
				element.avatarImages = config.pic_prefix + element.avatarImage
			});
			//停止加载中
			this.triggered = false;
			this.downRefresh = false
			//处理完逻辑停止刷新
			uni.stopPullDownRefresh();
			if (this.list.length >= this.pageCount) {
				this.status = 'nomore';
			} else {
				let arr = [...this.list, ...res.rows]
				this.list = arr
				if (res.rows.length < 10) {
					this.status = 'nomore';
				}
			}
		},

		//触底加载
		lowerBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				if (!this.downRefresh) {
					this.downRefresh = true
					this.status = 'loading';
					this.queryParams.pageNum += 1
					this.getcollectList(this.navIndex)
				}
			}
		},
		onRefresh() {
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList(this.navIndex)
		},
		onRestore() {
			this.triggered = false; // 需要重置
		},
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15rpx;

		.top {
			width: 100%;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.top_items {
				font-size: 30rpx;
				color: rgb(179, 173, 173);
			}

			.top_items_active {
				font-size: 34rpx;
				color: #000;
			}
		}

		.div {
			width: 100%;
			height: calc(100% - 80rpx);

			.box_scroll {
				height: 100%;
			}
		}

		.zanwu {
			font-size: 30rpx;
			color: #b3adad;
			text-align: center;
			margin-top: 20px;
		}

		.items {
			width: 100%;
			height: 140rpx;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 90rpx;
				height: 90rpx;

				.image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}

			.right {
				width: calc(100% - 110rpx);
				display: flex;
				align-items: center;
				align-content: center;
				flex-wrap: wrap;

				.header {
					width: 100%;

					.title {
						font-size: 30rpx;
						width: 100%;
						display: -webkit-box;
						/* 使用Webkit的弹性盒子模型 */
						-webkit-line-clamp: 2;
						/* 设置显示的行数 */
						-webkit-box-orient: vertical;
						/* 垂直排列子元素 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
						/* 显示省略号 */
					}

				}

				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					color: rgb(179, 173, 173);
					margin-top: 15rpx;
				}
			}

		}

	}
}
</style>